<template>
  <div>
    <el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()"
      @submit.native.prevent>
      <!-- 搜索框-->
      <el-form-item prop="queryDate">
        <el-date-picker v-model="searchForm.queryDate" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()" size="small" :loading="loading">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <ve-line :data="chartData" :settings="chartSettings"></ve-line>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import VeLine from 'v-charts/lib/line.common'
  import moment from 'moment'
  export default {
    data() {
      return {
        searchForm: {
          queryDate: []
        },
        loading: false,
        chartSettings: {
          area: true,
          legendName: {
            "count":"导航次数"
          },
          labelMap: {
            "count":"导航次数"
          }
        },
        chartData: {},
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = Date.now();
              picker.$emit('pick', [moment(end).subtract(7, 'days'), end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = Date.now();
              picker.$emit('pick', [moment(end).subtract(1, 'months'), end]);
            }
          }]
        }
      }
    },
    mounted() {
      const end = Date.now();
      this.searchForm.queryDate = [moment(end).subtract(1, 'months'), end]
      this.query()
    },
    components:{
      VeLine
    },
    methods: {
      query() {
        this.loading = true
        var url = "/mini/api/queryNavigateCount"
        this.$http({
          url: url,
          method: 'get',
          params: {
            'beginDate': moment(this.searchForm.queryDate[0]).format("YYYY-MM-DD"),
            'endDate': moment(this.searchForm.queryDate[1]).format("YYYY-MM-DD")
          }
        }).then(({
          data
        }) => {
          this.loading = false
          if (data && data.success) {
            this.chartData = {
              columns: ["refDate", "count"],
              rows: []
            }
            var list = data.list || []
            list.forEach((row)=>{
              var refDate = row.createDate.substring(0,10);
              this.chartData.rows.push({
                refDate: refDate,
                count: row.count
              })
            })
            console.log(this.chartData)
          }
        })
      }
    }
  }
</script>
